<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数据开发工具</title>

    <link href="../../skins/plugins/font-awesome/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../skins/plugins/animate.css" rel="stylesheet">


    <link rel="stylesheet" href="../../skins/develop/css/index.css">
    <link rel="stylesheet" href="../../skins/plugins/layui/css/layui.css">
    <link rel="shortcut icon" href="../../skins/product/img/logo.png">

</head>
<style>
    .layui-header {
        width: 100%;
        line-height: 50px;
        background: #081a3c;
        box-shadow: 3px 3px 8px #081a3c;
        position: fixed;
        z-index: 999;
    }
    .layui-layout-admin .layui-header {
        background-color: #081a3c;
    }
    .layui-header .layui-nav .layui-nav-item-active{
        border-bottom: 5px solid #0cc1f1;
        background-color: #0d3b6b;
    }

    .layui-skin-balck .layui-side {
        background-color: #081a3c!important;
    }
    .nav > li.active {
        border-left: 4px solid #3e75bf;
        background: #0c3561;
    }
    .nav > li > a:hover {
        background-color: #3eb57f !important;
    }
    .select {
        background-color: #3e75bf;
    }

    .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 3px;
        background-color: #0cc1f1;
        transition: all .2s;
        -webkit-transition: all .2s;
    }
    .layui-tab-title li {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        color: white;
        vertical-align: middle;
        font-size: 16px;
        transition: all .2s;
        -webkit-transition: all .2s;
        position: relative;
        line-height: 20px;
        min-width: 65px;
        padding: 0 15px;
        text-align: center;
        cursor: pointer;
    }
    .layui-tab-title .layui-this {
        color: white;
    }
    .layui-tab-title .layui-this:after {
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        width: 100%;
        height: 30px;
        border-width: unset;
        border-style: unset;
        border-bottom: 5px solid #0cc1f1;
        /*background-color: #0d3b6b;*/
    }

    .layui-tab-title {
         position: relative;
         left: 0;
         height: 30px;
         white-space: nowrap;
         font-size: 0;
         border-bottom-width: 0px;
         border-bottom-style: solid;
         transition: all .2s;
         -webkit-transition: all .2s;
     }
    .layui-tree-txt {
        display: inline-block;
        vertical-align: middle;
        color: white;
    }

   /* #top{background:green; float:left}
    #bottom{background:skyblue;float:right}
    #line{position:absolute;top:0;left:200px;height:100%;width:4px;overflow:hidden;background:red;cursor:w-resize;}
    .layui-layout-admin .layui-body {
        position: unset;
        width: 100%;
        top: 60px;
        left: 204px;
        bottom: 44px;
    }*/
</style>
<body class="layui-layout-body fixed-sidebar layui-skin-balck">
<div class="layui-layout layui-layout-admin  " id="box">

    <div class="layui-header">

        <div class="layui-logo">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#" style="color: white">
                <span class="clear">
                    <span class="block m-t-xs" style="font-size:20px;">
                        <i class="fa fa-area-chart"></i>
                        <strong class="font-bold">数据开发工具</strong>
                    </span>
                </span>
            </a>
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 显示/隐藏菜单 -->
            <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i></a></li>

            <li class="layui-nav-item"><a href="index.html">数据开发</a></li>
            <li class="layui-nav-item "><a href="query.html">自助分析</a></li>
            <li class="layui-nav-item "><a href="stream.html">流式计算</a></li>

        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="">运维管理<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">测试用户</a>
                <dl class="layui-nav-child" style="text-align: center">
                    <dd><a href="javascript:;">修改信息</a></dd>
                    <dd><a href="javascript:;">安全管理</a></dd>
                    <dd><a href="javascript:;">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
            </li>
        </ul>

    </div>
    <div class="layui-side" id="top">
        <!--<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" style="width: 190px;margin: 5px 5px 0px 5px;">新增</button>-->

        <div class="layui-tab">
            <ul class="layui-tab-title" style="margin: 0px 5px 0px 5px;">
                <li class="layui-this">任务</li>
                <li>数据</li>
            </ul>
            <div class="layui-tab-content " style="padding: 0px;">
                <div class="layui-tab-item layui-show">
                    <div class="layui-side-scroll sidebar-collapse">
                        <ul class="nav" id="side-menu">

                            <li>
                                <a class="J_menuItem select"  href="sql_editor_new.html"><i class="fa fa-file-text-o"></i> <span class="nav-label">新增任务</span></a>
                            </li>
                            <!--<li>
                                <a href="#"><i class="fa fa-random"></i> <span class="nav-label">近期任务</span><span class="fa arrow"></span></a>
                                <ul class="nav nav-second-level">
                                    <li><a class="J_menuItem" href="sql_editor.html">套牌车分析</a>
                                    </li>
                                </ul>
                            </li>-->
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入任务名称查询" class="layui-input" style="width: 200px;margin: 0px">

                            <li>
                                <a href="#"><i class="fa fa-random"></i> <span class="nav-label">任务列表</span><span class="fa arrow"></span></a>
                                <ul class="nav nav-second-level">
                                    <li>
                                        <div id="fltree"></div>
                                    </li>
                                </ul>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="layui-tab-item" id="fltre1e">

                </div>
            </div>
        </div>
    </div>

    <div class="layui-body" id="bottom">
        <!--面包屑部分开始-->
        <ul id="breadcrumb" class="breadcrumb navbar-header" >
            <li class=""><a href="#">首页</a></li>
        </ul>
        <!--面包屑部分结束-->
        <!-- 内容主体区域 -->
        <div class="layui-fluid layui-main-body" id = "Body-main">
            <iframe id="J_iframe" width="100%" height="100%" src="sql_editor_new.html" style="min-height: 500px" frameborder="0" scrolling="no" data-id="index_v1.html" seamless></iframe>
        </div>
    </div>

    <div id="line"></div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © inspur.com
    </div>
</div>


<!-- 全局js -->
<script src="../../skins/plugins/jquery.min.js?v=2.1.4"></script>
<script src="../../skins/plugins/bootstrap.min.js?v=3.3.6"></script>
<script src="../../skins/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../../skins/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="../../skins/plugins/layer/layer.min.js"></script>

<script src="../../skins/plugins/layui/layui.js"></script>


<script src="../../skins/js/admin/index.js"></script>
<script>
   /* window.onload = function() {
    var oBox = document.getElementById("box"),
        oTop = document.getElementById("top"),
        oBottom =document.getElementById("bottom") ,
        oLine = document.getElementById("line");
    oLine.onmousedown = function(e) {
        var disX = (e || event).clientX;
        oLine.left = oLine.offsetLeft;
        document.onmousemove = function(e) {
            var iT = oLine.left + ((e || event).clientX - disX);
            var e=e||window.event,tarnameb=e.target||e.srcElement;
            var maxT = oBox.clientWight - oLine.offsetWidth;
            oLine.style.margin = 0;
            iT < 0 && (iT = 0);
            iT > maxT && (iT = maxT);
            oLine.style.left = oTop.style.width = iT + "px";
            oBottom.style.width = oBox.clientWidth - iT + "px";
            $("msg").innerText='top.width:'+oLine.style.width+'---bottom.width:'+oBottom.style.width+'---oLine.offsetLeft:'+oLine.offsetLeft+'---disX:'+disX+'---tarnameb:'+tarnameb.tagName;
            return false
        };
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
            oLine.releaseCapture && oLine.releaseCapture()
        };
        oLine.setCapture && oLine.setCapture();
        return false
    };
};*/
    layui.config({
        base: '/100-demo/html/skins/kAdmin/skins/plugins/' //静态资源所在路径
    });
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
    layui.use('tree', function(){
        var data = [
            {
                title:"公安执法与执勤数据",spread: false
                ,children: [
                    {title:"国内安全保卫"},
                    {title:"经济侦查犯罪"},
                    {
                        title:"治安管理",spread: true
                        ,children:[
                            {
                                title:"人口管理信息系统",spread: true

                            }
                        ]
                    },
                    {title:"刑事侦查"},
                    {title:"出入境管理"},
                    {title:"铁道公安局"},
                    {title:"网络安全保卫"},
                    {title:"技术侦查"},
                    {title:"交通管理"},
                    {title:"法制"},
                    {title:"国际合作"},
                    {title:"装备财务"},
                    {title:"禁毒"},
                    {title:"科信"},
                    {title:"情报信息"},
                    {title:"警务保障"},
                    {title:"反邪教"},
                    {title:"反恐"},
                    {title:"情报中心"},
                    {title:"办公厅（室）"},
                    {title:"纪委督察"}
                ]
            },
            {title:"互联网数据"},
            {title:"电信数据"},
            {title:"物联网数据"},
            {title:"视频数据"},
            {title:"行业数据"},
            {title:"其他数据"}
        ];
        var tree = layui.tree;
        tree.render({
            elem: '#fltree'
            ,data: data
            ,accordion: true
            ,click: function(obj){

            }
        });
    });
</script>
</body>
</html>
